<template>
    <div class="header" id="headerNav" >
        <div class="header_line"></div>
        <div class="headerWrap">
            <div class="left">
                <!-- 折叠按钮 -->
                <div class="logo" @click="active=1;goContent(1)" :class="active==1?'active':''"><span class="text">平台功能</span></div>
                <div class="logo" @click="active=2;goContent(2)" :class="active==2?'active':''"><span class="text">合作优势</span></div>
                <div class="logo" @click="active=3;goContent(3)" :class="active==3?'active':''"><span class="text">接入流程</span></div>
                <div class="logo" @click="active=4;goContent(4)" :class="active==4?'active':''"><span class="text">产品展示</span></div>
                <div class="logo" @click="goContent(5)" :class="active==5?'active':''"><span class="text">产品优势</span></div>
                <div class="logo" @click="goContent(6)" :class="active==6?'active':''"><span class="text">合作伙伴</span></div>
            </div>
        </div>
    </div>
</template>
<script>
    import bus from '../common/bus';
    import $ from 'jquery'
    import _ from 'underscore'
    export default {
        data() {
            return {
                collapse: false,
                message: 2,
                showSubVar:false,
                img:'',
                active:1,
                scroll,
                wrapDom:{}
            }
        },
        activated(){
          this.wrapDom=$('.index-wrap')
          $('#goupNav').click(()=>{
            this.wrapDom.animate({scrollTop:this.offset.pin},600)
          }); 
          $('#godownNav').click(()=>{
            this.wrapDom.animate({scrollTop:0},600)
          });

          $('.index-wrap').scroll(()=>{
            var scrollTop=$('.index-wrap').scrollTop()  
            if(scrollTop>=this.offset.pin){
                $('#headerNav').css({'position':'fixed',top:0});
                if(scrollTop>=this.offset.hezou-20&&scrollTop<this.offset.accet-20){
                    this.active=2
                }else if(scrollTop>=this.offset.accet-20&&scrollTop<this.offset.product-20){
                    this.active=3
                }else if(scrollTop>=this.offset.product-50&&scrollTop<this.offset.productgood){
                    this.active=4
                }else if(scrollTop>=this.offset.productgood-20&&scrollTop<this.offset.hezuo){
                    this.active=5
                }else if(scrollTop>this.offset.hezuo){
                    this.active=6

                }
                else{
                    this.active=1
                }
            }else{
                $('#headerNav').css({'position':'relative',width:'100%'});
            }
          });
        },
        computed:{
            username(){
                return this.$store.getters.username;
            },
            userImg(){
                return this.$store.getters.userImg
            },
            offset(){
                return this.$store.getters.offset
            }
        },
        methods:{
            goContent(index){
                switch (index) {
                    case 1:
                        this.wrapDom.animate({scrollTop:this.offset.pin},600)
                    break;
                    case 2:
                        this.wrapDom.animate({scrollTop:this.offset.hezou},600)
                    break;
                    case 3:
                        this.wrapDom.animate({scrollTop:this.offset.accet},600)
                    break;
                    case 4:
                        this.wrapDom.animate({scrollTop:this.offset.product},600)
                    break;                    
                    case 5:
                        this.wrapDom.animate({scrollTop:this.offset.productgood},600)
                    break;
                    case 6:
                        this.wrapDom.animate({scrollTop:this.offset.hezuo+1000},600)
                    break;
                }
                this.active=index
            }
        },
        mounted(){}
    }
</script>
<style lang="less" scoped>
        .header_line{
            height: 5px;
    background-image: -webkit-linear-gradient(-360deg,#0ec1f6,#8823de);
    background-image: linear-gradient(90deg,#658690,#8823de);
        }
    .header {
        .headerWrap {
            width: 1300px;
            margin: 0 auto;
            .brand{
                width: 250px;
                float: left;
                height: 54px;
                img{
                    width: 149px;
                }
            }
        }
        box-sizing: border-box;
        width: 100%;
        z-index: 1000;
        height: 80px;
        font-size: 22px;
        color: #fff;
        box-shadow: 0 2px 10px 4px rgba(0, 0, 0, 0.2);
        background-color: #190629;
        margin-bottom: 44px;
        .left{  
            width: 1465px;
            margin: 0 auto;
            .more{
                >img{
                    width: 5%;
                    transition:all 0.3s;
                    transform: rotate(180deg);
                }
                .subWrap{
                    width: 567px;
                    height: 300px;
                    position: absolute;
                    border: 2px solid #595959;
                    border-top: 0;
                    background: #0f0814;
                    opacity: 0.9;
                    .column{
                        >div,li{
                            height: 51px;
                            font-size: 15px;
                            transition:all .3s;
                            list-style-type: none;
                            color: #e0dbdb;
                        }
                        li:hover{
                            color: #a3d3fd;
                            cursor: pointer;
                        }
                        .icon{
                            img{
                                width: 22%;
                                margin-top: 14px;
                            }
                        }
                        .headT{
                            font-weight: bold;
                            font-size: 20px;
                        }
                        width: 187px;
                        float: left;
                        height: 100%;
                        box-sizing: border-box;
                        border-right: 1px solid #777;
                    }
                }
                .none{
                    border: none !important;
                }
            }
            >div{
                font-size: 18px;
                color: #777;
                font-weight: 300;
                text-align: center;
                .text{
                transition: all 1s;
                    display: inline-block;
                    &:hover{
                        cursor: pointer;
                        color: #fff;
                    }                    
                }
            }
            .active{
                color: #fff;
            }
        }
    }
    .el-message-box{
        width: 260px !important;
    }
    .collapse-btn{
        float: left;
        padding: 0 21px;
        cursor: pointer;
        line-height: 54px;
    }
    .header .logo{
        display: inline-block;
        width: 14%;
        line-height: 75px;
    }
    .header-right{
        float: left;
        text-align: center;
        width: 205px;
        margin-left: 49px;
        .infoWrap{

            width: 162px;
            height: 51px;
            >div{
                display: inline-block;
                line-height: 51px;
                font-size: 16px;
                &:hover{
                    cursor:pointer;
                }
            }
        }
        .header-user-con{
            display: flex;
            height: 59px;
            align-items: center;
        }
    }
    .btn-fullscreen{
        transform: rotate(45deg);
        margin-right: 5px;
        font-size: 24px;
    }
    .btn-bell, .btn-fullscreen{
        position: relative;
        width: 30px;
        height: 30px;
        text-align: center;
        border-radius: 15px;
        cursor: pointer;
    }
    .btn-bell-badge{
        position: absolute;
        right: 0;
        top: -2px;
        width: 8px;
        height: 8px;
        border-radius: 4px;
        background: #f56c6c;
        color: #fff;
    }
    .btn-bell .el-icon-bell{
        color: #fff;
    }
    .user-name{
        margin-left: 10px;
        &:hover{
            cursor:pointer;
        }
    }
    .user-avator{
        margin-left: 20px;
    }
    .user-avator img{
        display: block;
        width:40px;
        height:40px;
        border-radius: 50%;
    }
    .el-dropdown-link{
        color: #fff;j
        cursor: pointer;
    }
    .el-dropdown-menu__item{
        text-align: center;
    }
    .imgWrapp{
        margin: 0 auto !important;
        width: 130px !important;
        margin-top: 11px !important;
        overflow: hidden !important;
        box-shadow: 0 2px 10px 4px rgba(0, 0, 0, 0.2) !important;
        min-height: 120px;
    }
    .input-group-addonp{
        font-size: 13px;
        margin-top: 23px;
        img{
            cursor: pointer;
            vertical-align: sub;
            box-shadow: 0 2px 10px 4px rgba(0, 0, 0, 0.2);
            margin-left: 10px;
        }
    }
</style>
